<template>
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader />
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="area-container right-area">
              <div class="data-statistics-header">
                <span class="title">数据总览</span>
                <div class="date-tabs">
                  <span :class="['tab', activeTab === 'today' && 'active']" @click="activeTab = 'today'">今日</span>
                  <span :class="['tab', activeTab === '7days' && 'active']" @click="activeTab = '7days'">7天</span>
                  <span :class="['tab', activeTab === '30days' && 'active']" @click="activeTab = '30days'">30天</span>
                </div>
              </div>
              <div class="data-statistics-grid">
                <div class="stat-item">
                  <div class="stat-label">视频</div>
                  <div class="stat-value">{{dashboardData.video}}</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">拼图</div>
                  <div class="stat-value">{{dashboardData.puzzle}}</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">图文</div>
                  <div class="stat-value">{{dashboardData.image}}</div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">数字人</div>
                  <div class="stat-value">{{dashboardData.person}}</div>
                </div>
              </div>
              <div class="data-statistics-actions">
                <div class="action-btn" @click="handleMyVideoProduct">我的视频成品</div>
                <div class="action-btn" @click="handleMyImageProduct">我的图文成品</div>
                <div class="action-btn" @click="handleMyVideoMaterial">我的视频素材</div>
                <div class="action-btn" @click="handleMyImageMaterial">我的图文素材</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import MyHeader from '../common/MyHeader.vue'
import {useRouter} from 'vue-router'
import utils from '../../utils/utils';
// 网站背景图
const router = useRouter()
const website_bg_url = ref('')
const activeTab = ref('7days')
const dashboardData = ref({
  image:0,
  puzzle:0,
  video:0,
  person:0,
})

// 主题控制light  dark
const theme = utils.getTheme();

onMounted(() => {
  initWebsiteBgUrl()
  initDashboardData()
})

//读取配置，获取网站背景图
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
  }
}

const initDashboardData = async () => {
  const response = await axiosUtil.post('api/pc/dashboard/index_dashboard', {})
  if (response.data.code === 1 && response.data.data) {
    const image = response.data.data.image
    const imageTotal = Object.values(image).reduce((sum: number, val) => sum + Number(val), 0)
    const puzzle = response.data.data.puzzle
    const puzzleTotal = Object.values(puzzle).reduce((sum: number, val) => sum + Number(val), 0)
    const video = response.data.data.video
    const videoTotal = Object.values(video).reduce((sum: number, val) => sum + Number(val), 0)
    dashboardData.value.image = imageTotal as number
    dashboardData.value.puzzle = puzzleTotal as number
    dashboardData.value.video = videoTotal as number
  }
}

const handleMyVideoProduct = () => {
  router.push('/videoWarehouse')
}
const handleMyImageProduct = () => {
  router.push('/videoWarehouse?id=12')
}
const handleMyVideoMaterial = () => {
  router.push('/videoWarehouse?id=21')
}
const handleMyImageMaterial = () => {
  router.push('/videoWarehouse?id=22')
}
</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  backdrop-filter: blur(10px);
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

.el-main {
  padding: 20px;
  height: 90vh;
  overflow-x: hidden;
}

.el-row {
  height: 100%;
  margin: 0 !important;
  min-height: 0;
}

.el-col {
  height: 100%;
  min-height: 0;
}

.area-container {
  height: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  transition: all 0.3s ease;
  padding: 15px;
}

.right-area {
  min-height: 70vh;
}

.data-statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.data-statistics-header .title {
  font-size: 1.3rem;
  font-weight: bold;
  color: v-bind('theme === "light" ? "#6a7fd6" : "#a5b8ff"');
  letter-spacing: 1px;
}
.date-tabs {
  display: flex;
  gap: 10px;
}
.tab {
  padding: 3px 16px;
  border-radius: 16px;
  background: transparent;
  color: v-bind('theme === "light" ? "#6a7fd6" : "#a5b8ff"');
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-size: 1rem;
}
.tab.active {
  background: v-bind('theme === "light" ? "#6a7fd6" : "#a5b8ff"');
  color: #fff;
}
.data-statistics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  background: v-bind('theme === "light" ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.25)"');
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid v-bind('theme === "light" ? "rgba(106,127,214,0.12)" : "rgba(106,127,214,0.25)"');
  margin-bottom: 24px;
  min-height: 120px;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  font-size: 1.1rem;
  position: relative;
  background: transparent;
}
.stat-item .stat-label {
  color: v-bind('theme === "light" ? "#6a7fd6" : "#a5b8ff"');
  margin-bottom: 6px;
}
.stat-item .stat-value {
  font-size: 1.7rem;
  font-weight: bold;
  color: v-bind('theme === "light" ? "#222" : "#fff"');
}
.stat-item:nth-child(1), .stat-item:nth-child(2) {
  border-bottom: 1px solid v-bind('theme === "light" ? "#e3e8f7" : "#222b44"');
}
.stat-item:nth-child(1), .stat-item:nth-child(3) {
  border-right: 1px solid v-bind('theme === "light" ? "#e3e8f7" : "#222b44"');
}
.data-statistics-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.action-btn {
  background: v-bind('theme === "light" ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.2)"');
  border-radius: 12px;
  box-shadow: 0 2px 8px v-bind('theme === "light" ? "rgba(106,127,214,0.08)" : "rgba(106,127,214,0.18)"');
  padding: 18px 0;
  text-align: center;
  font-size: 1.1rem;
  color: v-bind('theme === "light" ? "#6a7fd6" : "#a5b8ff"');
  font-weight: 500;
  cursor: pointer;
  border: 1px solid v-bind('theme === "light" ? "rgba(106,127,214,0.12)" : "rgba(106,127,214,0.22)"');
}
.action-btn:hover {
  background: v-bind('theme === "light" ? "#e3e8f7" : "#222b44"');
  box-shadow: 0 4px 16px v-bind('theme === "light" ? "rgba(106,127,214,0.15)" : "rgba(106,127,214,0.25)"');
}
</style>
